CMoney軟體工程師戰鬥營_jQuery_Week 14

cmoney

fanny 2021-05-28 19:31:46 ‧ 1329 瀏覽

分享至

分領域後
除了每週二的課程
每週四也會有老師指定的演示
本週我是負責jQuery
以下是我的不專業整理

什麼是jQuery
jQuery特性有哪些
如何安裝jQuery
jQuery語法
使用範例

什麼是jQuery?

jQuery是一套跨瀏覽器的JavaScript函式庫(library)，簡化HTML與JavaScript之間的操作。

jQuery是開源軟體，使用MIT授權條款授權。

jQuery的語法設計使得許多操作變得容易。

模組化的方式使jQuery函式庫能夠建立功能強大的動態網頁以及網路應用程式。

生日：2006年1月

最新版本：3.5 （4正在開發中）

最新版本釋出日期：2020年4月10日

勁敵：Bootstrap

jQuery特性有哪些

jQuery是使用最多的JS庫之一，它有很多優點，比如輕量、易用、完善的Ajax、良好的瀏覽器相容，以及它有健壯的選擇器等。這些優點使得jQuery成為幫助前端開發人員的有力工具。

HTML元素選取與操作→稍後揭曉（coming soon）
DOM→jQuery提供了選擇器，用於根據不同的條件
事件→jQuery庫包含等效於DOM事件的函數
CSS操作→提供一些常使用的屬性操作的簡化方法
JavaScript 特效和動畫→可以將特殊效果應用於DOM元素
AJAX→jQuery包括易於使用的AJAX函數，以從服務器加載數據而無需重新加載整個頁面。
多瀏覽器支援→jQuery庫自動處理跨瀏覽器問題

如何安裝jQuery

1.1下載jQuery

有兩個版本的jQuery 可供下載：

Production version - 用於實際的網站中，已被精簡和壓縮。
Development version - 用於測試和開發（未壓縮，是可讀的代碼）

網址：https://jquery.com/download/

1.2通過CDN（內容分發網絡）引用

有兩種方式：

連到網路,連到本地端

網址：https://developers.google.com/speed/libraries

2.把jQuery添加到網頁中

<body>
<script src="jquery.js"></script>
</body>

3.jQuery語法

來源網址：https://api.jquery.com/

文檔就緒函數→為了防止文檔在完全加載（就緒）之前運行jQuery 代碼。

$(document).ready(function(){
		所有 jQuery 函數位於document ready 函數中
});

如果在文檔沒有完全加載之前就運行函數，操作可能失敗。下面是兩個具體的例子：

試圖隱藏一個不存在的元素
獲得未完全加載的圖像的大小
選取物件：$("CSS選取器") or $("標籤")，$等同於jQuery

6個基本語法

取得內容、屬性

console.log($("p").html());        // 取得內容
console.log($("p").attr("class")); // 取得 class 屬性的值

更新 style 屬性

$("p").css("color", "red");         // 改變文字顏色
$("p").css("font-style", "italic"); // 變斜體

更新一般屬性

$("p").attr("id", "myid");
$("p").attr("style", "font-weight: bold;font-size: 30px;");

取代裡面內容

$("p").html("<span>這是 span 標籤的內容。</span>");
$("p").text("<span>這是 span 標籤的內容。</span>");

移除元素
```
$("p").remove();
```

新增元素至某處

$("p").append("<span>這是 span 標籤的內容。</span>"); // 裡面的最後面
$("p").prepend("<span>這是 span 標籤的內容。</span>"); // 裡面的最前面
$("p").after("<span>這是 span 標籤的內容。</span>"); // 同層後面
$("p").before("<span>這是 span 標籤的內容。</span>"); // 同層前面

jQuery選取器

元素選擇器

Query 使用CSS 選擇器來選取HTML 元素。

$("p") 選取<p> 元素。
$("p.intro") 選取所有class="intro" 的<p> 元素。
$("p#demo") 選取所有id="demo" 的<p> 元素。

屬性選取器

jQuery 使用XPath表達式來選擇帶有給定屬性的元素。

$("[href]") 選取所有帶有href 屬性的元素。
$("[href='#']") 選取所有帶有href 值等於"#" 的元素
$("h1[id^='my_']")選取所有h1標籤，且 id 的屬性值開頭等於 my_ 的元素。
$("[href$='.jpg']") 選取所有href 值以".jpg" 結尾的元素
$("p[class*='ara']")選取所有p標籤，且 class 的屬性值有包含 ara 字串的元素。

CSS 選取器
```
$("p").css("background-color","red");
```
實例

篩選器

$("p").first().css("color", "red");
$("p").last().css("color", "red");
$("p").eq(0).css("color", "red"); // 第 1 個
$("p").eq(-1).css("color", "red"); // 倒數第 1 個
$("p").slice(1, 3).css("color", "red");// 從索引值 1 到 3，但不包含 3

事件：$(selector).action()

$("button").click(function() {$(this).hide() 為隱藏當前元素 } )

https://api.jquery.com/category/events/mouse-events/
CSS操作

https://api.jquery.com/category/css/
jQuery效果
- 顯示/隱藏
  
  hide()
  
  show()
  
  toggle()
- 淡入/淡出
  
  fadeIn()
  
  fadeOut()
  
  fadeToggle()
  
  fadeTo(speed,opacity,callback))
- 滑入/滑出
  
  slideDown()
  
  slideUp()
  
  slideToggle()
- 動畫
  
  $(selector).animate({params}, speed, Easing, callback);
- 停止動畫
  
  $(selector).stop(stopAll,goToEnd);